<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--
        表单标签是一组相互独立的标签（标签功能相互独立，只有组合后才就有数据交换功能特性）
        表单标签可以简单的认为是一组通道标签（用户操作->后端服务）
            + 服务器交互标签 form
            + 页面操作标签 input select textarea
            + 按钮标签 input button
    -->
    <h3>按钮标签</h3>
    <!-- 在html中呈现一个视觉上的按钮结果（不同系统|不同浏览器效果不同），同时具有交换反应 -->
    <button>按钮名称</button>
    <!-- input 会因为 type 属性的取值切换页面效果 -->
    <!-- type="button" 时，构建按钮效果，按钮名称通过 value 属性定义-->
    <input type="button" value="按钮名称" >
    <br><br>
    <button>
        <img width="50px" height="50px" src="../assets/img/loading2.jpg">
        <span>加载中……</span>
    </button>
    <br><br>
    <button>
        <ul>
            <li>1</li>
            <li>1</li>
        </ul>
    </button>
    <br><br>
    <!--
        + 提交按钮 ：不定义在 form 标签中时和普通按钮一致，定义在form标签中时具有提交功能
                        => 提交功能：访问 form标签action属性定义的资源页面
                                   并且会携带form中 具有name 属性的 页面操作标签 的用户操作结果 （参数传递）
                                   用户结果的传递是以 键值对模式 记录数据 ( key=value )
        + 重置按钮 ：不定义在 form 标签中时和普通按钮一致，定义在form标签中时具有重置功能
                        => 重置功能：不会切换页面，但会将form中所有被用户操作过的操作标签，恢复到初始状态
        + 普通按钮 ：在没有 js 代码介入的情况下，该类型按钮不具有任何功能
    -->
    <input type="submit" value="提交按钮">
    <input type="reset" value="提交按钮">
    <input type="button" value="提交按钮">
    <br><br>

    <!-- form 表单标签是一个交换功能控制检测标签，该标签在页面和div是一个效果 -->
    <form action="11.表格标签.html">
        <input type="text" name="username" value="默认值">
        <br>
        <input type="text" name="password">
        <br>
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
        <input type="button" value="普通按钮">
        <br><br>
        <!-- button 标签构建的按钮，默认为submit按钮，可通过 type 属性修改按钮类型 -->
        <button>提交按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button type="button">普通按钮</button>
    </form>
</body>
</html>




